<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>定位的层级</title>
		<style type="text/css">
			.big_box{
				width: 300px;
				height: 300px;
				border: 2px solid #333;
			}
			.big_box div{
				/*position: relative;*/
				/*position: absolute;*/
				position: fixed;
			}
			.child1{
				width: 100px;
				height: 100px;
				background: yellowgreen;
				z-index: 8;
				top: 50px;
			}
			.child2{
				width: 150px;
				height: 150px;
				background: burlywood;
				z-index: 5;
			}
			.child3{
				width: 200px;
				height: 200px;
				background: darkslategray;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<!--
			定位:	
				相对定位 relative(相对于它本身)
					1.不影响本身的特性
					2.不会使元素脱离文档流(文档流就是元素从上至下垂直排列显示的流)
					3.如果没有偏移量,对自身没有影响
					
				绝对定位 absolute(相对于离它最近的具有相对定位的父元素定位)
					1.脱离文档流
					2.如果祖先元素都没有相对定位,则相对于body定位
					3.没有自己的地盘
					
				固定定位 fixed	(相对于浏览器屏幕可视区)
					1.即使浏览器滚动条移动,固定定位元素位置不变
			
			相对定位配合绝对定位使用
			
			定位的层级:
				默认为0
				层级越高,显示在越上层
		-->
		
		<div class="big_box">
			<div class="child1">
				child1
			</div>
			<div class="child2">
				child2
			</div>
			<div class="child3">
				child3
			</div>
		</div>
	</body>
</html>
